<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="./css/bootstrap.css">
        <link rel="stylesheet/less" type="text/css" href="./css/cluvio.less" />
        <!-- 动画插件 -->
        <link rel="stylesheet" href="./css/animate2013.min.css">
        <script src="https://cdn.jsdelivr.net/npm/less@4"></script>
        <title>首页</title>
        <!-- #d1181a -->
    </head>
    <body>
        <!-- 导航栏 -->
        <nav class="navbar navbar-default">
            <div class="container">
                <div class="navbar-header ml_1">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">
                        <img src="./img/logo.png">
                    </a>
                </div>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="nav-link"><a href="#">产品介绍</a></li>
                        <li class="nav-link"><a href="#">加盟</a></li>
                        <li class="nav-link"><a href="#">线下门店</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                aria-haspopup="true" aria-expanded="false">更多<span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">应用技术</a></li>
                                <li><a href="#">食品安全</a></li>
                            </ul>
                        </li>
                        <li class="nav-link">
                            <div class="btn1">
                                下载app
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

        <section class="hero">
            <div class="container">
                <div class="row">
                    <div class="col-md-5 col-xs-12 heroText">
                        <h1>邂逅您的美味！</h1>
                        <div>
                            <p><i>MFood&copy;</i> 食品公司始于1999年，致力于用奇妙的食品创意完成无数的美食梦，受到全世界客户的喜爱！</p>
                            <!-- <p>&nbsp;</p> -->
                            <p>使用<strong>最好的食材</strong>和<strong>最棒的菜单</strong>，完成您的各种愿望，为您带来不一样的美食体验！</p>
                        </div>
                        <p class="mb2"><a class="btn2" href="Products.html">马上点单！</a></p>
                        <p>或者拨打我们的热线 <span class="glyphicon glyphicon-earphone"></span>：<strong>666-888-999</strong></p>
                    </div>

                    <div class="col-md-7 col-xs-12 heroImg">
                        <img src="./img/food.png" alt="">
                    </div>

                </div>
            </div>
        </section>

        <!-- 技术支持 -->
        <section class="support mb2">
            <div class="container">
                <div class="row">
                    <h3 class="text-center mb2 mt2">技术支持</h3>
                </div>
                <div class="row supportThings flex mb2">
                    <div><img src="./img/support/scp.png" alt=""></div>
                    <div><img src="./img/support/nasa.png" alt=""></div>
                    <div><img src="./img/support/nerv.png" alt=""></div>
                    <div><img src="./img/support/kesulu.png" alt=""></div>
                </div>
            </div>
        </section>

        <!-- 选择理由 -->
        <section class="choose mb2">
            <div class="container">
                <div class="row chooseThings">
                </div>
            </div>
        </section>

        <!-- 优秀人才 -->
        <section class="talent mb2">
            <div class="container">
                <div class="row talentrow">

                </div>
            </div>
        </section>

        <!-- 热销产品 -->
        <section class="hot mb2">
            <div class="container hotrow">
                <div class="row">
                    <div class="col-md-12 col-xs-12 mb2">
                        <h1><span class="glyphicon glyphicon-fire"></span>热销产品</h1>
                    </div>
                </div>
            </div>
        </section>

        <!-- 订购步骤 -->
        <section class="order">
            <div class="container">
                <div class="row">
                    <div class="col-md-12 col-xs-12 mb2">
                        <h1><span class="glyphicon glyphicon-earphone"></span>轻松下单！</h1>
                    </div>
                    <div class="col-md-3 col-xs-12 mb2">
                        <div class="card">
                            <div>
                                <h2>01</h2>
                                <strong>下单/拨打热线</strong>
                            </div>
                            <div>用户可选择拨打热线或网页/app下单。</div>
                        </div>
                    </div>
                    <div class="col-md-3 col-xs-12 mb2">
                        <div class="card">
                            <div>
                                <h2>02</h2>
                                <strong>等待您的餐点</strong>
                            </div>
                            <div>用户的订单将从距离您最近的餐厅送达您的身边。</div>
                        </div>
                    </div>
                    <div class="col-md-3 col-xs-12 mb2">
                        <div class="card">
                            <div>
                                <h2>03</h2>
                                <strong>签收</strong>
                            </div>
                            <div>我们的专业送货人员将为您提供最优质的送餐服务。</div>
                        </div>
                    </div>
                    <div class="col-md-3 col-xs-12 mb2">
                        <div class="card">
                            <div>
                                <h2>04</h2>
                                <strong>评价</strong>
                            </div>
                            <div>请您为我们的服务留下宝贵的评价。</div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 点单 -->
        <section class="orders">
            <div class="container">
                <div class="row">
                    <div class="col-md-12 text-center">
                        <h1>您还在犹豫什么</h1>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 text-center ordersTips">点击下方的按钮，即刻开启您的圆梦之旅！</div>
                </div>
                <div class="row">
                    <div class="ordersBtn"><a href="Products.html" class="btn2">立即点单</a></div>
                </div>
                <div class="row">
                    <div class="col-md-12 text-center ordersTel">或拨打我们的热线：<strong>666-888-999</strong></div>
                </div>
            </div>
        </section>

        <!-- 底部栏 -->
        <section class="footer">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="footerLogo mb2"><img src="./img/logo.png" alt=""></div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3 nav2">
                        <div class="mb1"><a href="#">产品介绍</a></div>
                        <div class="mb1"><a href="#">加盟</a></div>
                        <div class="mb1"><a href="#">线下门店</a></div>
                        <div class="mb1"><a href="#"><strong>下载app</strong></a></div>
                    </div>
                    <div class="col-md-4 nav3">
                        <div class="supportThank">鸣谢支持：</div>
                        <div class="flex alignCenter">
                            <div class="mb1"><img src="./img/support/kesulu.png" alt=""></div>
                            <div class="supportName" style="color: #1b5311;">克苏鲁教会</div>
                        </div>
                        <div class="flex alignCenter">
                            <div class="mb1"><img src="./img/support/nerv.png" alt=""></div>
                            <div class="supportName" style="color: #ff0100;">NERV总部</div>
                        </div>
                        <div class="flex alignCenter">
                            <div class="mb1"><img src="./img/support/scp.png" alt=""></div>
                            <div class="supportName">SCP基金会</div>
                        </div>
                        <div class="flex alignCenter">
                            <div class="mb1"><img src="./img/support/nasa.png" alt=""></div>
                            <div class="supportName" style="color: #2259a6;">NASA</div>
                        </div>
                    </div>
                    <div class="col-md-5">
                        <img src="./img/food.png" alt="">
                    </div>
                </div>
                <div class="row mt2 segmentation"></div>
                <div class="row" style="color: #d1181a;">本站最终解释权归覃家亮&copy;所有，禁止拷贝。</div>
            </div>

        </section>

        <script src="./js/jquery.min.js"></script>
        <script src="./js/bootstrap.min.js"></script>
        <script src="./js/chooseData.js"></script>
    </body>
</html>
